<template>
  <div class="box2">
    <el-form
      :model="ruleForm"
      :rules="rules"
      :inline="false"
      ref="ruleForm"
      label-width="200px"
      class="demo-ruleForm"
      size="medium"
    >
      <div class="must">
        <div class="botn">
          <!--<div>-->
          <!--<el-form-item label="质权人名称(中文)：" prop="pledgeeNameCn">-->
          <!--<el-input v-model="ruleForm.pledgeeNameCn" placeholder="请填写姓名"></el-input>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="(英文)：" prop="person_type">-->
          <!--<el-input v-model="ruleForm.pledgeeNameEn" placeholder="请填写姓名"></el-input>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="质权人地址：" prop="pledgeeSiteCn">-->
          <!--<el-input v-model="ruleForm.pledgeeSiteCn" placeholder="请填写地址"></el-input>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="电话：" prop="pledgeePhone">-->
          <!--<el-input v-model="ruleForm.pledgeePhone" placeholder="请填写电话"></el-input>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="营业执照编号/身份证号：" prop="pledgeeNum">-->
          <!--<el-input v-model="ruleForm.pledgeeNum" placeholder="请填写名称或姓名"></el-input>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="邮政编码：" prop="pledgeeCode">-->
          <!--<el-input v-model="ruleForm.pledgeeCode" placeholder="请填写"></el-input>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="代理机构名称：" prop="pledgeeOrg">-->
          <!--<el-input v-model="ruleForm.pledgeeOrg" placeholder="请填写"></el-input>-->
          <!--</el-form-item>-->
          <!--</div>-->
          <div>
            <el-form-item label="出质人名称(中文)：" prop="outNameCN">
              <el-input
                v-model="ruleForm.outNameCN"
                placeholder="请填写姓名"
              ></el-input>
              <div class="inform">
                <img src="../../assets/imgs/inform.png" alt="通知" />
                <div class="content">
                  <span>示例：北京xx科技有限公司/张三</span>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="(英文)：" prop="pledgerNameEn">
              <el-input
                v-model="ruleForm.pledgerNameEn"
                placeholder="请填写姓名"
              ></el-input>
              <div class="inform">
              </div>
            </el-form-item>
            <el-form-item label="出质人地址：" prop="pledgerSiteCn">
              <el-input
                v-model="ruleForm.pledgerSiteCn"
                placeholder="请填写地址"
              ></el-input>
              <div class="inform">
                <img src="../../assets/imgs/inform.png" alt="通知" />
                <div class="content">
                  <span>示例：北京市xx区xx街xx号</span>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="电话：" prop="outPhoneNum">
              <el-input
                v-model="ruleForm.outPhoneNum"
                placeholder="请填写电话"
              ></el-input>
              <div class="inform">
                <img src="../../assets/imgs/inform.png" alt="通知" />
                <div class="content">
                  <span>示例：13135256570</span>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="营业执照编号/身份证号：" prop="outCreditNum">
              <el-input
                v-model="ruleForm.outCreditNum"
                placeholder="请填写营业执照编号/身份证号"
              ></el-input>
              <div class="inform">
                <img src="../../assets/imgs/inform.png" alt="通知" />
                <div class="content">
                  <span>示例： 610103100025511</span>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="出质人邮政编码：" prop="outPostCode">
              <el-input
                v-model="ruleForm.outPostCode"
                placeholder="请填写出质人邮政编码"
              ></el-input>
              <div class="inform">
                <img src="../../assets/imgs/inform.png" alt="通知" />
                <div class="content">
                  <span>示例： 610000</span>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="网上确认书：" prop="afterAmount">
              <span id="star">*</span>
              <upfile :callback="makeSure">
                <img :src="old_imgs['qrfiles']" v-if="old_imgs['qrfiles']" />
              </upfile>
              <div class="exam-img">
                <div class="img-inform">
                      <img src="../../assets/imgs/inform.png">
                    <span>示例:</span>
                </div>
                <examimg :imgType="4"></examimg>
              </div>
              <div>
                <span class="informs">
                  请点此
                  <a :href="mconfig.host + '/file/download?fileType=2'"
                    >下载网上确认书</a
                  >,查到相应商标编号并填充
                </span>
                <br />
                <span class="notice"
                  >请将下载的网上确认书填写完成, 然后上传JPG文件或是PNG文件</span
                >
              </div>
            </el-form-item>
            <!--<el-form-item label="代理机构名称：" prop="pledgerOrg">-->
            <!--<el-input v-model="ruleForm.pledgerOrg" placeholder="请填写"></el-input>-->
            <!--</el-form-item>-->
          </div>
        </div>
        <!--<div class="line"></div>-->
        <el-form-item label="出质商标注册号：" prop="dedicated">
          <el-input
            v-model.number="ruleForm.dedicated"
            placeholder="请填写"
          ></el-input>
        </el-form-item>
        <!--<el-form-item label="申请变更事项：" prop="checkList">-->
        <!--<el-checkbox-group v-model="ruleForm.checkList">-->
        <!--<el-checkbox class="input" :label="1">质权人名称</el-checkbox>-->
        <!--<el-checkbox class="input" :label="2">出质人名称</el-checkbox>-->
        <!--<el-checkbox class="input" :label="3">担保债权数额</el-checkbox>-->
        <!--</el-checkbox-group>-->
        <!--</el-form-item>-->
        <el-form-item label="担保债权数额：" prop="amount">
          <el-input v-model="ruleForm.amount" placeholder="请填写"></el-input>
        </el-form-item>
        <!--<el-form-item label="承诺书：" prop="ziliaofiles">-->
          <!--<uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'ziliaofiles'}" :list="ruleForm.ziliaofiles"></uploads>-->
          <!--<div class="inform">-->
            <!--<img src="../../assets/imgs/inform.png" alt="通知" />-->
            <!--<div class="content">-->
              <!--<span>提示：请上传出质人承诺书出质人和质押人承诺书</span>-->
            <!--</div>-->
          <!--</div>-->
        <!--</el-form-item>-->
        <el-form-item label="其他附件：" >
          <uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'dengjichenluofile'}" :list="ruleForm.dengjichenluofile"></uploads>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知" />
            <div class="content">
              <span>提示：其他附件</span>
            </div>
          </div>
        </el-form-item>

        <div class="line"></div>
        <div class="addItem">
          <!--<el-form-item label="其他共同质权人">-->
          <!--<el-button type="primary" @click="alterName = true">添加</el-button>-->
          <div class="common alter"  style="margin-left:50px">
            <el-form-item label="其他变更出质人名称：" >
              <both :callback="getAlterCommon" :append="$store.state.alterData.append" style="width:80%" :class_id="$route.query.id"></both>
            </el-form-item>
            <!--<div v-for="(item, index) in alterCommon" :key="index + '0'">-->
              <!--<div class="line"></div>-->
              <!--<el-form-item label="名称(中文)" prop="partNameCh">-->
                <!--<el-input-->
                  <!--v-model="item.partNameCh"-->
                  <!--placeholder="请填写姓名"-->
                  <!--@keyup.native="proAppendName(item.partNameCh)"-->
                <!--&gt;</el-input>-->
              <!--</el-form-item>-->
              <!--<el-form-item label="名称(英文)" prop="partNameEn">-->
                <!--<el-input-->
                  <!--v-model="item.partNameEn"-->
                  <!--placeholder="请填写姓名"-->
                <!--&gt;</el-input>-->
              <!--</el-form-item>-->
              <!--<el-form-item label="地址(中文)" prop="partAddrCh">-->
                <!--<el-input-->
                  <!--v-model="item.partAddrCh"-->
                  <!--placeholder="请填写地址"-->
                  <!--@keyup.native="proAppendAddr(item.partAddrCh)"-->
                <!--&gt;</el-input>-->
              <!--</el-form-item>-->
              <!--<el-form-item label="地址(英文)" prop="partAddrEn">-->
                <!--<el-input-->
                  <!--v-model="item.partAddrEn"-->
                  <!--placeholder="请填写地址"-->
                <!--&gt;</el-input>-->
              <!--</el-form-item>-->
            <!--</div>-->
            <!--<div class="add-btn">-->
              <!--<el-button-->
                <!--icon="el-icon-plus"-->
                <!--@click="plusAlter"-->
                <!--circle-->
              <!--&gt;</el-button>-->
              <!--<el-button-->
                <!--icon="el-icon-minus"-->
                <!--@click="dele"-->
                <!--v-if="alterCommon.length > 0"-->
                <!--circle-->
              <!--&gt;</el-button>-->
            <!--</div>-->
          </div>

          <div class="common add">
            <el-form-item label="其他共同出质人：" >
              <both :callback="getCommon" :append="$store.state.alterData.append2" style="width:80%" class_id=230></both>
            </el-form-item>
            <!--<div v-for="(item, index) in common" :key="index + '2'">-->
              <!--<div class="line"></div>-->
              <!--<el-form-item label="名称(中文)" prop="partNameCh">-->
                <!--<el-input-->
                  <!--v-model="item.partNameCh"-->
                  <!--placeholder="请填写姓名"-->
                  <!--@keyup.native="proAppendName(item.partNameCh)"-->
                <!--&gt;</el-input>-->
              <!--</el-form-item>-->
              <!--<el-form-item label="名称(英文)" prop="partNameEn">-->
                <!--<el-input-->
                  <!--v-model="item.partNameEn"-->
                  <!--placeholder="请填写姓名"-->
                <!--&gt;</el-input>-->
              <!--</el-form-item>-->
              <!--<el-form-item label="地址(中文)" prop="partAddrCh">-->
                <!--<el-input-->
                  <!--v-model="item.partAddrCh"-->
                  <!--placeholder="请填写地址"-->
                  <!--@keyup.native="proAppendAddr(item.partAddrCh)"-->
                <!--&gt;</el-input>-->
              <!--</el-form-item>-->
              <!--<el-form-item label="地址(英文)" prop="partAddrEn">-->
                <!--<el-input-->
                  <!--v-model="item.partAddrEn"-->
                  <!--placeholder="请填写地址"-->
                <!--&gt;</el-input>-->
              <!--</el-form-item>-->
            </div>
            <div class="add-btn">
              <el-button icon="el-icon-plus" @click="plus" circle></el-button>
              <el-button
                icon="el-icon-minus"
                @click="deles"
                v-if="common.length > 0"
                circle
              ></el-button>
            </div>
            <!--<el-form-item label="其他共有出质人" prop="person_type"></el-form-item>-->
            <!--<div v-for="(item,indexs) in commons" :key="indexs+'3'">-->
            <!--<el-form-item :label="item.name" prop="person_type">-->
            <!--<el-input v-model="item.values" placeholder="请填写姓名"></el-input>-->
            <!--</el-form-item>-->
            <!--<el-form-item :label="item.englishName" prop="person_type">-->
            <!--<el-input v-model="item.englishValues" placeholder="请填写姓名"></el-input>-->
            <!--</el-form-item>-->
            <!--<el-form-item :label="item.site" prop="person_site">-->
            <!--<el-input v-model="item.siteValues" placeholder="请填写地址"></el-input>-->
            <!--</el-form-item>-->
            <!--<el-form-item :label="item.englishSite" prop="person_site">-->
            <!--<el-input v-model="item.englishSiteValues" placeholder="请填写地址"></el-input>-->
            <!--</el-form-item>-->
            <!--</div>-->
            <!--<el-button icon="el-icon-plus" class="add-item" @click=" pluss" circle></el-button>-->
          <!--</div>-->
          <!--</el-form-item>-->
        </div>
        <el-form-item>
          <div class="btns">
            <el-button type="primary" @click="outStep">上一步</el-button>
            <el-button type="primary" @click="submitCheck('ruleForm')"
              >提交并审核</el-button
            >
          </div>
        </el-form-item>
        <el-dialog
          class="dialog"
          :show-close="false"
          :center="true"
          :visible.sync="dialogVisible"
           width="460px"
          :before-close="handleClose"
        >
          <div class="hint">
            <img src="../../assets/imgs/branch.png" alt="提示图片" />
            <span style="color:#F96900">选择您想去办理的网点</span>
          </div>
          <el-form-item label="选择网点：" prop="branchNetworkId">
            <el-select v-model="branchNetworkId" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.deptId"
                :label="item.deptName"
                :value="item.deptId"
              ></el-option>
            </el-select>
          </el-form-item>

          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false" class="cancel"
              >取 消</el-button
            >
            <el-button type="primary" @click="submitForm('ruleForm')"
              >确 定</el-button
            >
          </div>
        </el-dialog>
        <el-dialog
          class="hintMsg"
          :show-close="false"
          title="温馨提示"
          :visible.sync="centerDialogVisible"
          width="462px"
        >
          <span
            >您的信息已提交，工作人员将在3-5日内对你的信息审核，审核通过后即可预约业务，审核结果将通过短信的方式发送给你。</span
          >
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="skip">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </el-form>
  </div>
</template>
<script>
import upfile from "../common/upfile.vue";
import examimg from "../common/imgExample";
import uploads from "../common/uploads";
import both from "../common/both";
export default {
  data() {
    return {
      //网点列表
      options: [],
      //提交成功弹出框变量
      centerDialogVisible: false,
      //网点弹出框控制变量
      dialogVisible: false,
      //提交表单
      formData: new FormData(),
      //表单唯一id
      classId: "",
      //更变名称选项控制变量
      alterName: false,
      //添加共用人选项控制变量
      addCon: false,
      // 共有人名称
      appendsName: false,
      // 共有人地址
      appendsAddr: false,
      obj: {},
      // 是否上传图片
      uploadImg: false,
      //共有人模板
      alterCommon: [],
      alterCommons: [],
      common: [],
      commons: [],
      //变更模板
      alterMount1: {
        BeforeNameCN: "",
        BeforeNameEN: "",
        AfterNameCN: "",
        AfterNameEN: "",
        AddCategories: 1,
      },
      alterMount2: {
        BeforeNameCN: "",
        BeforeNameEN: "",
        AfterNameCN: "",
        AfterNameEN: "",
        AddCategories: 2,
      },
      commonMount1: {
        BeforeNameCN: "",
        BeforeNameEN: "",
        BeforeAddressCN: "",
        BeforeAddressEN: "",
        AddCategories: 3,
      },
      commonMount2: {
        BeforeNameCN: "",
        BeforeNameEN: "",
        BeforeAddressCN: "",
        BeforeAddressEN: "",
        AddCategories: 4,
      },
      //填写的信息
      ruleForm: {
        //质权人信息
        pledgerSiteCn: "",
        outCreditNum: "",
        outNameCN: "",
        pledgerNameEn: "",
        outPhoneNum: "",
        outPostCode: "",
        tradeNumber: "",
        dedicated: "",
        amount: "",
        //                    afterAmount: "2424",
        //                    checkList: [],
        value: "",
        //附加信息
        alterCommonArr: [],
        alterCommonArrs: [],
        commonArr: [],
        commonArrs: [],
//          ziliaofiles:[],
          dengjichenluofile:[]
      },
      branchNetworkId: "",
      rules: {
        outNameCN: [
          { required: true, message: "选项不能为空", trigger: "change" },
            {
                pattern: /^[\u4E00-\u9FA5a-zA-Z]{2,18}$/,
                message: "请输入正确的中文名称",
                trigger: "blur",
            },
        ],
        //   dengjichenluofile: [
        //   { required: true, message: "附件不能为空", trigger: "change" },
        // ],
        pledgerSiteCn: [
          { required: true, message: "选项不能为空", trigger: "change" },
//            {
//              pattern: /^((省|自治区).+(市))|(市|行政区|自治州).+(区|县).+(路|街|道|村).+号.*$/,
//              message: "你的地址格式不正确",
//              trigger: "blur",
//            },
        ],
        outPhoneNum: [
          { required: true, message: "选项不能为空", trigger: "change" },
          {
            pattern: /^1[345789]\d{9}$/,
            message: "电话格式错误",
            trigger: "blur",
          },
        ],
        outCreditNum: [
          { required: true, message: "选项不能为空", trigger: "change" },
          {
            pattern: /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})|((^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$))$/,
            message: "请输入正确的身份证号码/营业执照编号",
            trigger: "blur",
          },
        ],
        outPostCode: [
          { required: true, message: "选项不能为空", trigger: "change" },
          {
            pattern: /^[1-9]{1}(\d){5}$/,
            message: "邮编格式错误",
            trigger: "blur",
          },
        ],
        dedicated: [
          { required: true, message: "选项不能为空", trigger: "change" },
        ],
        amount: [
          { required: true, message: "选项不能为空", trigger: "change" },
        ],
      },
      old_imgs: {},
    };
  },
  mounted() {
    //获取从存储在路由中的classId
    this.classId = this.$route.query.id;
    //获取网点列表
    this.$http.get("/trademark/system/dept/findDept").then((res) => {
      this.options = res.data.data;
    });
    if (this.$route.query.data_id) {
      this.uploadImg = true;
      //修改
      let {
        amount,
        outAddress,
        outCreditNum,
        outNameCN,
        outNameEN,
        outPhoneNum,
        outPostCode,
        tradeNumber,
//          ziliaofiles,
          dengjichenluofile,
        qrfile,
      } = Object.assign(
        this.$store.state.alterData.public,
        this.$store.state.alterData.data
      );
      this.old_imgs["qrfiles"] = this.mconfig.host + qrfile;
      this.ruleForm["amount"] = amount;
//      this.ruleForm["ziliaofiles"] = JSON.parse(ziliaofiles);
      this.ruleForm["dengjichenluofile"] = JSON.parse(dengjichenluofile);
      //console.log(outAddress, outNameEN, 456465465)
      this.ruleForm["pledgerSiteCn"] = outAddress;
      this.ruleForm["outCreditNum"] = outCreditNum;
      this.ruleForm["outNameCN"] = outNameCN;
      this.ruleForm["pledgerNameEn"] = outNameEN;
      this.ruleForm["outPhoneNum"] = outPhoneNum;
      this.ruleForm["outPostCode"] = outPostCode;
      this.ruleForm["dedicated"] = tradeNumber;
      this.alterCommon = this.$store.state.alterData.append;
      this.common = this.$store.state.alterData.append2;
    }
  },

  //        watch: {
  //            //通过数据监听的方式将共有人模板中的信息同步到ruleForm.commonArr中
  //            alterCommon: {
  ////                handler(newName, oldName) {
  ////                    this.alterCommon.forEach((item, index) => {
  ////                        this.ruleForm.alterCommonArr[index].BeforeNameCN = item.value;
  ////                        this.ruleForm.alterCommonArr[index].BeforeNameEN = item.englishValue;
  ////                        this.ruleForm.alterCommonArr[index].AfterNameCN = item.siteValue;
  ////                        this.ruleForm.alterCommonArr[index].AfterNameEN =
  ////                            item.englishSiteValue;
  ////                        this.ruleForm.alterCommonArr[index].AddCategories = 1;
  ////                    });
  ////                },
  ////                deep: true,
  //            },
  //            alterCommons: {
  ////                handler(newName, oldName) {
  ////                    this.alterCommons.forEach((item, index) => {
  ////                        this.ruleForm.alterCommonArrs[index].BeforeNameCN = item.values;
  ////                        this.ruleForm.alterCommonArrs[index].BeforeNameEN =
  ////                            item.englishValues;
  ////                        this.ruleForm.alterCommonArrs[index].AfterNameCN = item.siteValues;
  ////                        this.ruleForm.alterCommonArrs[index].AfterNameEN =
  ////                            item.englishSiteValues;
  ////                        this.ruleForm.alterCommonArrs[index].AddCategories = 2;
  ////                    });
  ////                },
  ////                deep: true,
  //            },
  //            common: {
  ////                handler(newName, oldName) {
  ////                    this.common.forEach((item, index) => {
  ////                        this.ruleForm.commonArr[index].BeforeNameCN = item.value;
  ////                        this.ruleForm.commonArr[index].BeforeNameEN = item.englishValue;
  ////                        this.ruleForm.commonArr[index].BeforeAddressCN = item.siteValue;
  ////                        this.ruleForm.commonArr[index].BeforeAddressEN =
  ////                            item.englishSiteValue;
  ////                        this.ruleForm.commonArr[index].AddCategories = 3;
  ////                    });
  ////                },
  ////                deep: true,
  //            },
  //            commons: {
  ////                handler(newName, oldName) {
  ////                    this.commons.forEach((item, index) => {
  ////                        this.ruleForm.commonArrs[index].BeforeNameCN = item.values;
  ////                        this.ruleForm.commonArrs[index].BeforeNameEN = item.englishValues;
  ////                        this.ruleForm.commonArrs[index].BeforeAddressCN = item.siteValues;
  ////                        this.ruleForm.commonArrs[index].BeforeAddressEN =
  ////                            item.englishSiteValues;
  ////                        this.ruleForm.commonArrs[index].AddCategories = 4;
  ////                    });
  ////                },
  ////                deep: true,
  //            },
  //        },
  methods: {
      getCommon(value){
          // console.log(value,145645);
          this.common =value;
      },
      getAlterCommon(value){
          // console.log(value,145645);
          this.alterCommon = value;
      },
      backUrl(url,file_config){
          this.ruleForm[file_config["field"]].push(url)
      },
      delUrl(index,file_config){
          this.ruleForm[file_config["field"]].splice(index,1)
          this.$set(this.ruleForm,file_config["field"],this.ruleForm[file_config["field"]])
      },
    proAppendName(val){
      let s = /^[\u4E00-\u9FA5]{2,5}$/;
      if(val.match(s) != null){
        this.appendsName = true
      }
    },
    proAppendAddr(val){
      let s = /^[\u4E00-\u9FA5]{2,5}$/;
      if(val.match(s) != null){
        this.appendsAddr = true
      }
    },
    submitCheck(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid && this.uploadImg == true) {
          this.dialogVisible = true;
        } else if (!valid) {
          this.open1("存在错误的格式填写", "error");
        } else {
          this.open1("请上传网上确认书", "error");
        }
      });
    },

    //网上确认书
    makeSure(files) {
       this.ruleForm.qrfiles = files[0];
      this.old_imgs = {};
      this.uploadImg = true;
      this.ruleForm.qrfiles = files;
      // this.old_imgs["qrfiles"] = "";
    },

    //返回上一步
    outStep() {
      this.$emit("wp", 1, "请填写申请业务信息");
    },
    //提示模板
    open1(msg, types = "success") {
      this.$message({
        message: msg,
        type: types,
      });
    },
    //弹出框的选项确认框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //表单提交事件
    submitForm(formName) {
      let _this = this;
      if (this.branchNetworkId != "") {
        //每次提交重新生成新的FormData用于储存新的数据
        this.formData = new FormData();
        this.dialogVisible = false;

        //将所有数组中的内容合并到一起发送
        this.ruleForm.commonArr = this.ruleForm.commonArr.concat(
          this.ruleForm.alterCommonArr,
          this.ruleForm.alterCommonArrs,
          this.ruleForm.commonArr,
          this.ruleForm.commonArrs
        );
        this.formData.append("classId", this.classId);
        this.formData.append("outNameCN", this.ruleForm.outNameCN); //出质人中文名字
        this.formData.append("outNameEN", this.ruleForm.pledgerNameEn); //出质人英文名字
        this.formData.append("outAddress", this.ruleForm.pledgerSiteCn); //出质人地址
        this.formData.append("outCreditNum", this.ruleForm.outCreditNum); //出质人身份证/营业执照
        this.formData.append("outPhoneNum", this.ruleForm.outPhoneNum); //出质人电话
        this.formData.append("outPostCode", this.ruleForm.outPostCode); //出质人邮编
        //                        this.formData.append("outAgencyName", this.ruleForm.pledgerOrg);
        this.formData.append("tradeNumber", this.ruleForm.dedicated); //出质商标注册号
        this.formData.append("amount", this.ruleForm.amount); //担保债权额数
        this.formData.append("proAppends", JSON.stringify(this.alterCommon)); //其他质权人
        this.formData.append("proAppends2", JSON.stringify(this.common)); //其他出质人
//        this.formData.append("ziliaofiles", JSON.stringify(this.ruleForm.ziliaofiles)); //其他出质人
        this.formData.append("otherfile", JSON.stringify(this.ruleForm.dengjichenluofile)); //其他出质人

        //                        this.formData.append("AfterAmount", this.ruleForm.afterAmount);//
        //获取vuex中保存的步骤二中的数据
        let arr = this.$store.getters.getRuleForm;
        for (let key in arr) {
          this.formData.append(key, arr[key]);
        }
        this.formData.append(
          "qrfiles",
          this.old_imgs.qrfiles ? {} : this.ruleForm.qrfiles[0]
        );
        //                        this.formData.append(
        //                            "AppChange",
        //                            JSON.stringify(this.ruleForm.checkList)
        //                        );

        this.formData.append("branchNetworkId", this.branchNetworkId);
        // this.formData.append("userId", "2");
        this.formData.append(
          "ProPledgeAppendJson",
          JSON.stringify(this.ruleForm.commonArr)
        );
        //   this.formData.append("appAddCn", site);
        //   this.formData.append("appAddEn", englishSite);
        //   this.formData.append("appNameCn", name);
        //   this.formData.append("appNameEn", englishName);
        //   this.formData.append("postCode", postal);
        //   this.formData.append("phone", phone);
        //   this.formData.append("imgAdd", person_type);
        //   this.formData.append("userId", "2");

        //配置请求头
        var config = {
          header: {
            "Content-Type": "multipart/form-data",
          },
        };
        let url = "";

        if (this.$route.query.data_id) {
          this.formData.append("id", this.$route.query.data_id);
          url = "/trademark/ProPledge/modifyNoCommit";
        } else {
          url = "/trademark/ProPledge/firstSubmit";
        }
        // axios向后端发送数据
        this.$http
          .post(url, this.formData, config)
          .then(function(response) {
            //若状态码不为200则不跳转
            if (response.data.code != 200) {
              _this.open1("提交失败", "error");
              return;
            }
            _this.centerDialogVisible = true;
          })
          .catch(function(error) {});
      } else {
        this.open1("请选择网点编号", "error");
        return false;
      }
    },
    //跳转函数
    skip() {
      this.centerDialogVisible = false;
      this.open1("操作成功");
      this.$router.push({
        path: "/business/myBusiness/auditing",
      });
    },
    // makeSure(files) {
    //   this.uploadImg = true;
    //   this.ruleForm.qrfiles = files;
    //   this.old_imgs["qrfiles"] = "";
    // },
    //点击添加更变许可人
    plusAlter() {
      //                let objCommom = JSON.parse(JSON.stringify(this.alterMount1));
      //                this.ruleForm.alterCommonArr.push(objCommom);
      //let objValue = JSON.parse(JSON.stringify(this.common[0]))
      this.alterCommon.push({
        partAddrCh: "",
        partAddrEn: "",
        partNameCh: "",
        partNameEn: "",
        classId: this.class_id,
      });
    },
    //            plussAlter() {
    //                let objCommom = JSON.parse(JSON.stringify(this.alterMount2));
    //                this.ruleForm.alterCommonArrs.push(objCommom);
    //                //let objValue = JSON.parse(JSON.stringify(this.common[0]))
    //                this.alterCommons.push({
    //                    values: "",
    //                    englishValues: "",
    //                    siteValues: "",
    //                    englishSiteValues: "",
    //                });
    //            },
    plus() {
      //                let objCommom = JSON.parse(JSON.stringify(this.commonMount1));
      //                this.ruleForm.commonArr.push(objCommom);
      //let objValue = JSON.parse(JSON.stringify(this.common[0]))
      this.common.push({
        partAddrCh: "",
        partAddrEn: "",
        partNameCh: "",
        partNameEn: "",
        classId: this.class_id,
      });
    },
    dele() {
      this.alterCommon.pop();
    },
    deles() {
      this.common.pop();
    },
    //            pluss() {
    //                let objCommom = JSON.parse(JSON.stringify(this.commonMount2));
    //                this.ruleForm.commonArrs.push(objCommom);
    //                //let objValue = JSON.parse(JSON.stringify(this.common[0]))
    //                this.commons.push({
    //                    name: "名称(中文)：",
    //                    englishName: "(英文)：",
    //                    site: "地址(中文)：",
    //                    englishSite: "(英文)：",
    //                    values: "",
    //                    englishValues: "",
    //                    siteValues: "",
    //                    englishSiteValues: "",
    //                });
    //            },
  },
  components: { upfile,examimg,uploads,both,},
};
</script>
<style lang="less" scoped>
.el-tag{
  
}
.btns {
  display: flex;
  justify-content: center;
  .el-button {
    margin: 0 20px;
  }
}

.box2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  // margin-top: 100px;
  width: 100%;
  padding-right: 206px;
  min-height: 800px;
  .tle {
    font-size: 24px;
    color: #000;
  }
  .el-form {
    width: 100%;
    .el-input {
      width: 80%;
    }
  }
  .must,
  .select {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 0 30px;
    margin-bottom: 80px;
    width: 100%;
    // border: 1px solid #bbbbbb;
    border-radius: 10px;
    .botn {
      display: flex;
      justify-content: space-around;
      width: 100%;
      .input {
        width: 120px;
      }
    }
    .el-form-item {
      width: 680px;
      
    }
    .inline {
      display: flex;
      .el-form-item {
        margin: 0;
        width: 260px !important;
       
      }
    }
  }
  .must {
    margin-bottom: 20px;
  }
  .line {
    width: calc(100% - 125px);
    float: right;
    // width: 280px;
    margin: 30px auto;
    height: 1px;
    border-top: 1px dashed #d9d9d9;
  }
  .imgHint {
    margin: 5px;
    font-size: 12px;
    line-height: 17px;
    color: #f5222d;
  }
  .affirm {
    font-size: 12px;
    color: #a0a3a5;
    a {
      text-decoration: none;
      color: #3685ff;
    }
  }

  .input {
    width: 120px;
  }
  .upload {
    margin: 20px 0;
  }
  .type-number {
    width: 250px;
  }
  .informs {
    position: absolute;
    width: 500px;
    font-size: 12px;
    color: #a0a3a5;
    a {
      text-decoration: none;
      color: #3685ff;
    }
  }
  .notice {
    color: #f00;
    font-size: 12px;
  }
  .inform {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 80%;
    width: 300px;
    // border:1px solid red;
    height: 32px;
    color: #f5222d;
    line-height: 15px;
    img {
      margin: 11px;
    }
    .content {
      display: flex;
      flex-direction: column;
      color: #F96900;
      .ts {
        text-indent: 3em;
      }
    }
  }
  .tle {
    list-style: none;
    margin: 40px 0 20px;
    font-size: 24px;
    & ~ .tle {
      color: #bbb;
    }
  }
  .hint {
    color: #f5222d;
    background-color: #fff;
    .el-form-item__label {
      width: 150px;
    }
    img {
      width: 20px;
    }
  }
  .el-steps {
    width: 70%;
    height: 200px;
  }
  .el-button {
    //display: block;
    display: inline;
    margin: 0 20px;
    // background-color: #67c23a !important;
    // border-color: #67c23a !important;
  }

  .common .el-button {
    background-color: #fff !important;
    border-color: #bbb !important;
  }
}

.dialog-footer {
               display: flex;
               justify-content: space-between;
  .lan {
    
    background-color: #2c9dfc !important;
    border-color: #2c9dfc !important;
  }
}

.addItem {
  display: flex;
  // justify-content: space-around;
  justify-content: space-evenly;
  width: 80%;
  flex-direction: column;
  .common {
    .add-btn {
      margin-left: 40%;
      margin-bottom: 100px;
    }
    .el-form-item {
      margin: 10px 0;
      width: 100%;
      .el-form-item__label {
        width: 280px !important;
        text-align: right !important;
      }
    }
  }
}

.el-checkbox-group {
  margin-top: 10px;
}

.dialog /deep/ .el-form-item__label {
  margin-left: 20px;
  width: 100px !important;
}

.dialog /deep/ .el-form-item__content {
  display: flex;
  justify-content: left;
  margin-left: 100px !important;
}

.dialog /deep/ .el-input {
  width: 250px;
}

.el-checkbox-group {
  line-height: 14px;
}

.is-checked /deep/ .el-radio__inner,
.is-checked /deep/ .el-checkbox__inner {
  border-color: #409eff;
  background: #409eff;
}

.el-radio /deep/ .el-radio__inner:hover {
  border-color: #999999 !important;
}

.is-checked /deep/ .el-radio__label,
.is-checked /deep/ .el-checkbox__label {
  color: #333;
}

.is-focus .el-checkbox__inner {
  border-color: #999999 !important;
}

.el-checkbox /deep/ .el-checkbox__inner:hover {
  border-color: #999999 !important;
}

.el-step__head.is-process {
  border-color: #f96900;
  color: #f96900 !important;
}

.hintMsg {
  /deep/ .el-dialog__header {
    display: flex;
    justify-content: center;
    font-weight: bold;
  }
  .dialog-footer {
    justify-content: center;
    .el-button {
      border-color: #2c9dfc !important;
      background: #2c9dfc !important;
    }
  }
}
.cancel {

  background: #ccc;
  border-color: #ccc;
}
#star{
  position: absolute;
  color: red;
  margin-left: -105px;
}
.exam-img{
  position: absolute;
  top: 0;
  left: 465px;
}
.img-inform{
  img{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -140px;
    transform: translate(-50%,-50%);
  }
  span{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      white-space: nowrap;
      margin-left: -100px;
      width: 50px;
      color: #f96900;
  }
}
</style>
